<template>
	<view class="evaluateTalk">
		<view class="talk">
			<view class="talk_t">
				<view class="author">
					<image :src="details.avatar" mode="aspectFill" class="" />
					<view class="">
						<view class="author_name">{{details.name}}</view>
						<view class="time">{{details.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="talk_b">
				<view class="article_text">
					{{details.content || ''}}
				</view>
				<view class="article_imgs">
					<block v-for="(img,i) in imgList" :key="i">
						<image :src="img" mode="aspectFill" @tap="previewImg"></image>
					</block>
				</view>
			</view>
		</view>
		<view class="comment_list">
			<view class="title">全部评论</view>
			<view class="list">
				<block v-if="list && list.length">
					<view class="item" v-for="(item,i) in list" :key="i">
						<view class="avatar">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="comment_info">
							<view class="comment_top">
								<view class="">
									<view class="user_name">{{item.nickname}}</view>
									<view class="time">{{item.createTime}}</view>
								</view>
								<view class="likes" @click="onGiveLike(item.id)">
									<uni-icons v-if="!item.likeType" type="heart" size="18"></uni-icons>
									<uni-icons v-if="item.likeType" type="heart-filled" color="red"
										size="18"></uni-icons>
									<text>{{item.countStart}}</text>
								</view>
							</view>
							<view class="comment_text">
								{{item.content}}
							</view>
						</view>
					</view>
				</block>
				<view style="text-align: center;" v-if="list.length==0">
					<image style="width: 200rpx;height: 200rpx;" src="../../../static/nodata.png"></image>
					<view style="color: #999;text-align: center;">暂无数据</view>
				</view>
				<view style="text-align: center;color: #999;margin-bottom: 50rpx;font-size: 24rpx;"
					v-if="noMoreData&&list.length!=0">
					没有更多啦
				</view>
			</view>
		</view>
		<view class="send_box" :style="'bottom:'+keyboardHeight+'rpx;'">
			<view class="input_box">
				<textarea name="" :adjust-position="false" :style="'height:'+textareaHeight+'rpx;'" v-model="content"
					@input="inputMsg" :placeholder="hintText"></textarea>
				<view class="msg_text">{{content}}</view>
			</view>
			<view class="send_btn" @click="onCommit()">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				textareaHeight: 74,
				keyboardHeight: 0,
				details: {},
				id: '',
				hintText: '这里还缺一条你的优质评论',
				noMoreData: false,
				lastPage: 1,
				page: 1,
				imgList: [],
				details: {},
				id: '',
				list: []
			};
		},
		onLoad(opt) {
			this.id = opt.id
			uni.onKeyboardHeightChange(res => {
				const {
					windowWidth,
					windowHeight
				} = uni.getSystemInfoSync()
				this.keyboardHeight = Math.round(res.height * (750 / windowWidth))
			});
		},
		onShow() {
			this.getDetails()
			this.getCommentList()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getCommentList()
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			async onGiveLike(id) {
				const res = await this.$api.post(`community/note/reply/like/${id}`, {});
				console.log(res, "点赞")
				if (res.code == 200) {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					setTimeout(() => {
						this.getCommentList()
					}, 500)
				}
			},
			// 发布评论
			async onCommit() {
				if (!this.content) {
					uni.showToast({
						title: '评论内容不能为空',
						icon: 'none'
					})
					return false;
				} else {
					this.postComment()
				}
			},
			// 发表评论
			async postComment() {
				const res = await this.$api.post(`community/note/reply/add`, {
					content: this.content,
					type: 2,
					noteId: this.id
				});
				console.log(res, "回复评论")
				if (res.code == 200) {
					uni.showToast({
						title: '发送成功，审核后即可展示~',
						icon: 'none'
					})
					// this.showToast('')
					this.page = 1
					this.noMoreData = false
					this.hintText = '这里还缺一条你的优质评论',
						this.content = ''
					this.commentMsg = {}
					// setTimeout(() => {
					// 	this.getCommentList()
					// }, 500)
				}
			},
			// 评论列表
			async getCommentList() {
				//1文章 2话题
				const res = await this.$api.get(`community/note/reply/list/${this.id}/2`, {
					limit: 20,
					page: this.page,
				});
				console.log(res, "评论详情")
				if (res.code == 200) {
					const { list,totalPage } = res.data
					if (this.page == 1) {
						this.list = list || [];
						this.lastPage = totalPage || 1;
					} else {
						this.list.push(...list);
					}
					 this.noMoreData = this.page != 1 && list.length == 0 ? true : false
				}
			},
			getImg(imgs) {
				this.imgList = imgs?.split(',')
				return imgs?.split(',')
			},
			async getDetails() {
				const res = await this.$api.get(`community/topic/recommend/details`, {
					id: this.id,
				});
				console.log(res);
				if (res.code == 200) {
					this.details = res.data;
					if(res.data && res.data.picture) {
						this.imgList = res.data.picture?.split(',')
					}
				}
			},
			inputMsg() {
				var timer = setTimeout(() => {
					this.$nextTick(() => {
						uni.createSelectorQuery().select('.msg_text').boundingClientRect(res => {
							this.textareaHeight = Math.round(res.height * (750 / res.width));
						}).exec();
					})
					clearTimeout(timer)
				}, 1000)
			},
			previewImg() {
				uni.previewImage({
					current: 0,
					urls: this.imgList,
				});
			}
		}
	}
</script>

<style lang="scss">
	.evaluateTalk {
		.talk {
			padding: 26rpx 54rpx 40rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			background-color: #fff;
			border-bottom: 20rpx solid #F7F7F7;

			.talk_t {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.author {
					display: flex;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 14rpx;
						background-color: #F7F7F7;
					}

					.author_name {
						font-size: 30rpx;
						line-height: 30rpx;
						font-weight: bold;
						margin-bottom: 14rpx;
					}

					.time {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #B3B3B3;
					}
				}
			}

			.talk_b {
				.article_text {
					font-size: 26rpx;
					line-height: 40rpx;
					margin-bottom: 16rpx;
					word-wrap: break-word;
					// word-break: break-all;
				}

				.article_imgs {
					image {
						width: 206rpx;
						height: 200rpx;
						border-radius: 20rpx;
					}

					image:not(:last-child) {
						margin-right: 12rpx;
					}
				}
			}
		}

		.comment_list {
			padding: 40rpx 54rpx 120rpx;
			box-sizing: border-box;

			.title {
				font-size: 26rpx;
				font-weight: bold;
				margin-bottom: 48rpx;
			}

			.list {
				.item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 60rpx;

					.avatar {
						image {
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
						}
					}

					.comment_info {
						flex: 1;
						margin-left: 20rpx;

						.comment_top {
							display: flex;
							justify-content: space-between;

							.user_name {
								font-size: 26rpx;
								line-height: 30rpx;
							}

							.time {
								font-size: 20rpx;
								line-height: 20rpx;
								color: #B3B3B3;
								padding: 10rpx 0;
							}

							.likes {
								padding-top: 34rpx;
								display: flex;
								align-items: center;

								>text {
									font-size: 24rpx;
									line-height: 24rpx;
									margin-left: 10rpx;
								}
							}
						}



						.comment_text {
							font-size: 26rpx;
							line-height: 32rpx;
						}
					}


				}
			}
		}

		.send_box {
			width: 100%;
			padding: 20rpx 26rpx 40rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;

			.input_box {
				width: 534rpx;
				min-height: 74rpx;
				position: relative;
				background-color: #F5F5F5;
				border-radius: 14rpx;

				textarea {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					position: absolute;
					left: 0;
					top: 0;
					right: 0;
					z-index: 9;
				}

				.msg_text {
					width: 534rpx;
					min-height: 74rpx;
					padding: 16rpx 20rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					line-height: 30rpx;
					opacity: 0;
				}
			}

			.send_btn {
				width: 130rpx;
				height: 74rpx;
				border-radius: 14rpx;
				text-align: center;
				line-height: 74rpx;
				background-color: #2E80FE;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}
	}
</style>